<template>
  <div class="pageBox">
    <head-component title="我的团队"></head-component>
    <div class="tabsBox flex-center">
      <div
        :class="[tabStatus ? 'tab tabActive flex-center' : 'tab flex-center']"
        @click="onTab(true)"
      >
        推荐
      </div>
      <div
        :class="[
          !tabStatus ? 'tab2 tabActive flex-center' : 'tab2 flex-center',
        ]"
        @click="onTab(false)"
      >
        安置
      </div>
    </div>

    <div class="menuBox">
      <div class="menu flex-between">
        <div class="menuItem flex-center">
          <div class="menuItemTop flex-row">
            <p>{{ team.zhiNum }}</p>
            <span>(人)</span>
          </div>
          <div class="menuItemBom">直推人数</div>
        </div>
        <div class="menuItem flex-center">
          <div class="menuItemTop flex-row">
            <p>{{ team.teamNum }}</p>
            <span>(人)</span>
          </div>
          <div class="menuItemBom">团队人数</div>
        </div>
        <div class="menuItem flex-center">
          <div class="menuItemTop flex-row">
            <p>{{ team.teamTotalScore }}</p>
          </div>
          <div class="menuItemBom">
            {{ tabStatus ? "团队福豆" : "团队持票" }}
          </div>
        </div>
      </div>
    </div>

    <div class="titleBox flex-row">
      <div class="line"></div>
      <p>{{ tabStatus ? "直推列表" : "安置列表" }}</p>
    </div>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list">
        <div class="listItem flex-between" v-for="item in list" :key="item.id">
          <div class="left flex-row">
            <img :src="item.avatar" alt="" />
            <div class="info">
              <p class="flex-row">
                {{ item.nickname }}
                <span class="partner" v-if="item.serviceLevelName">{{ item.serviceLevelName }}</span>
                <span class="level" v-if="tabStatus">等级：{{ item.level_name }}</span>
              </p>
              <span>{{ item.account }}</span>
            </div>
          </div>
          <div class="right" @click="onLockUp(item)">{{ tabStatus ? item.score : item.piao }}{{ tabStatus ? "福豆" : "持票" }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const tabStatus = ref(true);
    const team = ref({});
    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(true);
    const finished = ref(false);

    function onLoad() {
      post("/portal", {
        module: "User",
        interface: tabStatus.value ? "4101" : "4201",
        data: {
          page: page.value,
          lastId: lastId.value,
        },
      }).then((res) => {
        console.log(res);
        team.value = res.data.userInfo;
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }

    function onTab(status) {
      tabStatus.value = status;
      refresh();
    }

    function refresh() {
      page.value = 1;
      lastId.value = 0;
      list.value = [];
      loading.value = true;
      finished.value = false;
      onLoad();
    }

    function onLockUp(param) {
      if(tabStatus.value) {
        return;
      }
      router.push({
        path: "/lockup",
        query: {
          userId: param.id,
        }
      });
    }

    return {
      tabStatus,
      page,
      lastId,
      list,
      loading,
      finished,
      team,
      onTab,
      onLoad,
      refresh,
      onLockUp,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  padding-top: 88px;
  .tabsBox {
    margin-top: 30px;
    .tab {
      width: 290px;
      height: 80px;
      background: #ffffff;
      border-radius: 44px 0px 0px 44px;
      font-size: 32px;
      font-weight: 500;
      color: #e00b12;
      border: 1px solid #f50811;
      border-right: 0;
    }
    .tab2 {
      width: 290px;
      height: 80px;
      background: #ffffff;
      border-radius: 0px 44px 44px 0px;
      border: 1px solid #f50811;
      font-size: 32px;
      font-weight: 500;
      color: #e00b12;
      border-left: 0;
    }
    .tabActive {
      color: #ffffff;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
    }
  }
  .menuBox {
    width: 92%;
    height: 180px;
    background: linear-gradient(
      270deg,
      rgba(179, 11, 17, 1),
      rgba(245, 8, 17, 1)
    );
    margin: 50px auto 0;
    border-radius: 20px;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0px 8px 20px -3px rgba(191, 191, 191, 0.4);
    .menu {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background: linear-gradient(313deg, #ffffff 0%, #fde4e5 100%);
      .menuItem {
        flex: 1;
        flex-direction: column;

        .menuItemTop {
          p {
            font-size: 42px;
            font-weight: 500;
            color: #333333;
          }
          span {
            font-size: 24px;
            font-weight: 500;
            color: #333333;
          }
        }
        .menuItemBom {
          font-size: 24px;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
  .titleBox {
    margin-top: 50px;
    padding-left: 30px;
    .line {
      width: 6px;
      height: 30px;
      background: #fa4b5a;
      border-radius: 5px;
      margin-right: 20px;
    }
    p {
      font-size: 32px;
      font-weight: 500;
      color: #17181a;
    }
  }
  .list {
    padding: 0 30px;
    .listItem {
      margin-top: 42px;
      .left {
        img {
          width: 88px;
          height: 88px;
          border-radius: 50%;
        }
        .info {
          margin-left: 20px;
          p {
            font-size: 30px;
            font-weight: 400;
            color: #333333;
            margin-bottom: 17px;
            .partner {
              font-size: 20px;
              font-weight: 400;
              color: #ffffff;
              padding: 5px 10px;
              background: linear-gradient(138deg, #8655dc 0%, #c571d9 100%);
              border-radius: 19px;
              margin-left: 20px;
            }
            .level {
              color: #E00B12;
              font-size: 26px;
              margin-left: 20px;
              padding-left: 20px;
              border-left: 2px solid #999999;
            }
          }
          span {
            font-size: 26px;
            font-weight: 400;
            color: #999999;
          }
        }
      }
      .right {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
    }
  }
}
</style>